<template>
  <div id="xueke">
    <div class="step-one">
      <div class="all-title">学科知识库</div>
      <div class="step-one-content">
        <div
          class="one-add all-box"
          @click="$message.success('加速研发中，敬请期待~')"
        >
          <el-icon
            size="28"
            color="#7487FE"
          >
            <DocumentAdd />
          </el-icon>
          <div>创建知识库</div>
        </div>
        <div
          class="all-box"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="one-title">
            <el-icon
              size="20"
              color="#7487FE"
            >
              <FolderOpened />
            </el-icon>
            <div>{{ item.title }}</div>
          </div>
          <div class="one-content">{{ item.content }}</div>
          <div class="one-nums">
            <div>
              <div class="one-num">{{ item.num1 }}</div>
              <div class="one-num-title">文档数</div>
            </div>
            <div>
              <div class="one-num">{{ item.num2 }}</div>
              <div class="one-num-title">千字符数</div>
            </div>
            <div>
              <div class="one-num">{{ item.num3 }}</div>
              <div class="one-num-title">关联应用</div>
            </div>
          </div>
          <div class="one-tabs">
            <div class="one-tab">
              <div>
                <el-icon size="14">
                  <PriceTag />
                </el-icon>
              </div>
              <div>
                {{ item.tab }}
              </div>
            </div>
            <div class="one-menu">
              <el-icon color="#475467">
                <MoreFilled />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      list: [
        {
          title: "Digital Image Processing",
          content:
            "图像处理领域的“圣经”，系统讲解图像处理的核心概念与技术，涵盖滤波、增强、分割等经典算法。",
          num1: 1,
          num2: 438,
          num3: 2,
          tab: "自然语言,基础",
        },
        {
          title: "图像工程",
          content: "分为上、中、下三册，覆盖图像处理、分析与理解的全流程。",
          num1: 3,
          num2: 1231,
          num3: 4,
          tab: "",
        },
        {
          title: "Computer Vision: Algorithms and ...",
          content:
            "全面梳理计算机视觉的核心算法与应用场景，从图像处理到三维重建均有详细阐述。",
          num1: 1,
          num2: 154,
          num3: 1,
          tab: "",
        },
        {
          title: "动手学计算机视觉",
          content:
            "结合Python代码与理论讲解，涵盖图像处理、视觉识别、场景重建四大模块。",
          num1: 11,
          num2: 2397,
          num3: 3,
          tab: "自然语言,基础",
        },
        {
          title: "模式识别",
          content:
            "中文经典教材，涵盖统计模式识别与结构模式识别，结合实际案例解析。",
          num1: 2,
          num2: 267,
          num3: 1,
          tab: "自然语言,基础",
        },
        {
          title: "深度学习",
          content:
            "深度学习领域的权威著作，详细解析卷积神经网络（CNN）、生成对抗网络（GAN）等模型。",
          num1: 2,
          num2: 277,
          num3: 1,
          tab: "自然语言,基础",
        },
        {
          title: "Learning OpenCV",
          content:
            "OpenCV库的权威指南，通过C++代码示例讲解图像处理、目标检测等实战技术。",
          num1: 44,
          num2: 5722,
          num3: 5,
          tab: "",
        },
        {
          title: "StatQuest图解机器学习",
          content:
            "以漫画形式解析复杂算法，如SVM、随机森林等，适合视觉化学习。",
          num1: 1,
          num2: 1138,
          num3: 1,
          tab: "自然语言,基础",
        },
        {
          title: "计算机视觉：模型、学习和推理",
          content: "从概率模型角度解析视觉算法，适合理论研究。",
          num1: 2,
          num2: 342,
          num3: 1,
          tab: "自然语言,基础",
        },
        {
          title: "机器视觉",
          content: "侧重数学推导与工业应用，适合高阶读者。",
          num1: 24,
          num2: 2743,
          num3: 3,
          tab: "自然语言,基础",
        },
      ],
    };
  },
  created() {
    this.initList();
  },
  methods: {
    initList() {
      this.list.forEach((item) => {
        if (item.tab === "") {
          item.tab = "添加标签";
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#xueke {
  .all-box {
    padding: 20px;
    box-sizing: border-box;
  }
  .step-one {
    margin-bottom: 20px;
    .step-one-content {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      > div {
        width: calc(25% - 15px);
        height: 220px;
        cursor: pointer;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        &.one-add {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 14px;
          > div {
            font-size: 16px;
            color: #272839;
          }
          &:hover {
            background: #f2f4f7;
          }
        }
        .one-title {
          display: flex;
          gap: 10px;
          align-items: center;
          font-size: 16px;
          color: #140e35;
          margin-bottom: 11px;
          i {
            fill: red;
          }
        }
        .one-content {
          height: 34px;
          font-size: 12px;
          color: #9293ab;
          line-height: 17px;
          margin-bottom: 21px;
        }
        .one-nums {
          display: flex;
          height: 56px;
          background: #f8faff;
          border-radius: 6px;
          margin-bottom: 10px;
          gap: 10px;
          > div {
            position: relative;
            width: calc(100% / 3 - 10px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 9px;
            .one-num {
              font-size: 12px;
              color: #4658ff;
            }
            .one-num-title {
              font-size: 12px;
              color: #43436b;
            }
            &::after {
              position: absolute;
              right: 0;
              content: "";
              display: block;
              width: 1px;
              height: 27px;
              background: #e6e6f7;
            }
            &:last-child::after {
              display: none;
            }
          }
        }
        .one-tabs {
          display: flex;
          align-items: center;
          gap: 11px;
          .one-tab {
            display: flex;
            align-items: center;
            gap: 4px;
            width: 100%;
            height: 32px;
            background: #f2f4f7;
            border-radius: 6px;
            font-size: 12px;
            color: #475467;
            padding: 0 10px;
            box-sizing: border-box;
          }
          .one-menu {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            min-width: 32px;
            height: 32px;
            background: #f2f4f7;
            font-size: 12px;
          }
        }
      }
    }
  }
  //媒体查询
  @media (max-width: 1230px) {
    .step-one{
      .step-one-content {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
          > div {
            width: calc(50% - 15px);
          }
      }
    }
  }
}
</style>